<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <title>一个简单的留言墙</title>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js "></script>

    <script type="text/javascript">
        function load(){
            window.open("./info.html","","width=400,height=400")
        }
    </script>
    <link rel="stylesheet" href="css/dl.css" type="text/css"/>
</head>
<body background="/kh1.png" >
<!--灯笼模块 -->
<!-- 灯笼1 -->
<div class="deng-box">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">节</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>

<!-- 灯笼2 -->
<div class="deng-box1">
    <div class="deng">
        <div class="xian"></div>
        <div class="deng-a">
            <div class="deng-b"><div class="deng-t">春</div></div>
        </div>
        <div class="shui shui-a"><div class="shui-c"></div><div class="shui-b"></div></div>
    </div>
</div>
<!--天气模块-->
<div id="weather-v2-plugin-simple"></div>
<script>
    WIDGET = {
        CONFIG: {
            "modules": "01234",
            "background": 4,
            "backgroundColor": "8ECAC8",
            "tmpColor": "FFFFFF",
            "tmpSize": 16,
            "cityColor": "FFFFFF",
            "citySize": 16,
            "aqiSize": 16,
            "weatherIconSize": 24,
            "alertIconSize": 18,
            "padding": "10px 10px 10px 10px",
            "shadow": "1",
            "language": "zh",
            "borderRadius": 5,
            "fixed": "false",
            "vertical": "top",
            "horizontal": "left",
            "key": "wtv0BVSSIN"
        }
    }
</script>
<script src="https://apip.weatherdt.com/simple/static/js/weather-simple-common.js?v=2.0"></script>



<!--内容模块-->
<br>
<div style="border:solid 1px #d8000f">
    <button onclick="load()">版本更新</button>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="https://apip.weatherdt.com/v2/h5.html?bg=1&md=02345&lc=accu&key=rPZOLADVM8">天气详细查询</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="glyLogin.html">管理员</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="tiao">学生登陆</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://8.136.135.118:8080/ym/sjlp.html">时间罗盘</a>
    &nbsp;&nbsp;&nbsp;&nbsp;
    <a href="http://8.136.135.118:8080/ym/ldax.html">流动爱心</a>
</div>
<br>
<div align="left">
    <table border="1" class="table   table-bordered table-condensed table-hover">
        <tr>
            <th>用户IP</th>
            <th>用户名</th>
            <th>留言</th>
            <th>日期</th>
            <th>地址</th>
        </tr>
        <tr th:each="user:${users}">
            <td th:text="${user.ip}"></td>
            <td th:text="${user.username}"></td>
            <td th:text="${user.info}"></td>
            <td th:text="${#dates.format(user.data,'yyyy-MM-dd hh:mm:ss')}"></td>
            <td th:text="${user.address}"></td>
        </tr>
    </table>
    <!--分页-->
    <div class="modal-footer no-margin-top">
        <div class="col-md-6 col-xs-8 col-xs-offset-1">
            当前第 [[${pageInfo.pageNum}]]页，共 [[${pageInfo.pages}]] 页， 共 [[${pageInfo.total}]] 条记录
        </div>

        <ul class="pagination pull-right no-margin">
            <li>
                <a th:href="'/getAll?pageNum=1'">首页</a>
            </li>
            <li class="prev" th:if="${pageInfo.hasPreviousPage}">
                <a th:href="'/getAll?pageNum='+${pageInfo.prePage}">
                    上一页<i class="ace-icon fa fa-angle-double-left"></i>
                </a>
            </li>
            <!--遍历条数-->
            <li th:each="nav:${pageInfo.navigatepageNums}">
                <a th:href="'/getAll?pageNum='+${nav}" th:text="${nav}" th:if="${nav != pageInfo.pageNum}"></a>
                <span style="font-weight: bold;background: #6faed9;" th:if="${nav == pageInfo.pageNum}" th:text="${nav}" ></span>
            </li>

            <li class="next" th:if="${pageInfo.hasNextPage}">
                <a th:href="'/getAll?pageNum='+${pageInfo.nextPage}">
                    下一页<i class="ace-icon fa fa-angle-double-right"></i>
                </a>
            </li>
            <li>
                <!--/*@thymesVar id="pageInfo" type=""*/-->
                <a th:href="'/getAll?pageNum='+${pageInfo.pages}">尾页</a>
            </li>
        </ul>

    </div>
</div>

<!--可移动音乐模块-->
<style>
    #move{width: 360px;border:solid 1px; height: 86px; background-color: #e3e075; position: absolute; left: 50px; top: 500px}
    #kemove{width: 30px;border:solid 1px; height: 86px; background-color: #8ecac8; position: absolute; left: 330px; top: 0px}
</style>
<script>
    window.onload = function(){
        var oDiv = document.getElementById("move");

        var offsetX = 0;
        var offsetY = 0;
        //第一步：当对div进行鼠标点击事件的时候，记录下当前鼠标的位置
        oDiv.onmousedown = function(ev){
            var e = ev || window.event;
            offsetX = e.clientX - oDiv.offsetLeft;
            offsetY = e.clientY - oDiv.offsetTop;
            //第二步：当我们在document下对div进行拖动的时候，给div的left和right进行定位
            document.onmousemove = function(ev){
                var e = ev || window.event;

                oDiv.style.left = e.clientX - offsetX + 'px';
                oDiv.style.top = e.clientY - offsetY + 'px';
            }
        }
        //第三步：在document下当鼠标抬起的时候，取消鼠标跟随事件
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
</script>
<div id = 'move'>
    <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=28606305&auto=1&height=66"></iframe>
    <div id='kemove'></div>
</div>
<div style="width:600px;margin:0 auto; padding:20px 0;">
    <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/recordQuery" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">陕ICP备2021004202号-1</p></a>
</div>
</body>
</html>
